<template>
<div id="body">
  <div class="description">
    <el-input v-model="username" placeholder="请输入用户名" size="large" maxlength="32"><i slot="prefix" class="el-input__icon el-icon-sone-user"></i></el-input>
    <el-input v-model="password" type="password" placeholder="请输入密码" size="large"><i slot="prefix" class="el-input__icon el-icon-sone-password"></i></el-input>
    <el-button type="primary" round size="large" style="margin-bottom: 0px;" @click="login">登录系统</el-button> <br/>
    <div style="font-size: 12px; margin-top: 10px;"><router-link to="/backPwd">忘记密码？</router-link></div>
  </div>
</div>
</template>

<script>
  export default {
    name: 'Login',
    data () {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      login () {
        this.$store.commit('loginSuccess')
        // 控制router 路由
        this.$router.push('/')
      }
    },
    mounted () {
      if (this.$store.state.loggedin === true) {
        // go() 会刷新页面，push()不会
        // this.$router.go('/')
        this.$router.push('/')
      }
    }
  }
</script>

<style scoped>
/* =================== 登录页===================== */
/**
  * 设置背景图全屏覆盖及固定
  * 设置内部元素偏移
  */
#body {
  /*此处背景图自行替换*/
  background: url('../assets/login.png') no-repeat center center fixed;
  /* background-color: greenyellow; */
  background-size: cover;
  min-height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding-top: calc(50vh - 6em);
  font: 150%/1.6 Baskerville, Palatino, serif;
}
/**
* 整体居中功能；
* 背景透明虚化
* 溢出隐藏
* 边缘圆角化
* 文字增加淡阴影
*/
.description {
  position: relative;
  margin: 0 auto;
  padding: 1em;
  max-width: 20em;
  background: hsla(0,0%,100%,.15) border-box;
  overflow: hidden;
  border-radius: .3em;
  box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
    0 .5em 1em rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
  /* line-height: 60px; */
}
.description input {
  padding: 20px auto;
  margin: 10px auto;
}
.description button {
  margin-top: 30px;
  width: 200px;
  font-size: 18px;
  font-weight: bold;
}
/*使用滤镜模糊边缘*/
.description::before{
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: -30px;
  z-index: -1;
  -webkit-filter: blur(20px);
  filter: blur(20px);
}
.description a {
  text-decoration: none;
}
/* =============================================== */
</style>